<template>
  <div class="dialog_main">
    <div class="title">为确认是您本人操作，请完成以下验证</div>
    <el-form ref="forgotForm" :model="sizeForm" size="mini" :rules="changeRiles" label-width="135px"
      label-position="left">
      <el-form-item label="已绑定的手机">
        <div class="phone">{{ showPhone }}</div>
      </el-form-item>
      <el-form-item prop="validCode" label="短信验证码">
        <el-tooltip class="item" effect="dark" content="请输入验证码" placement="right-end" popper-class="popperClass">
          <el-input v-model.trim="sizeForm.validCode" placeholder="请输入验证码" style="width: 45%;" />
        </el-tooltip>
        <el-button class="verify-btn" size="medium" @click="sendValidation">{{ validation }}</el-button>
      </el-form-item>
      <el-form-item prop="password" label="新的登录密码">
        <el-tooltip class="item" effect="dark" placement="right-end" popper-class="popperClass">
          <!-- <br />至少包含大小写字母、数字及特殊字符中的两种<br />不能与用户名相同 -->
          <div slot="content">长度为6-20个字符</div>
          <el-input v-model.trim="sizeForm.password" placeholder="请输入您的密码" type="password" show-password
            style="width: 90%;"></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item prop="passwordAgain" label="确认新的登录密码">
        <el-tooltip class="item" effect="dark" content="请再次输入您的密码" placement="right-end" popper-class="popperClass">
          <el-input v-model.trim="sizeForm.passwordAgain" placeholder="请再次输入您的密码" type="password" show-password
            style="width: 90%;"></el-input>
        </el-tooltip>
      </el-form-item>
      <el-button type="primary" class="primary" @click="clickforgot">完成</el-button>
    </el-form>
  </div>
</template>

<script>
import register from '@/utils/login/register'
import { updataPasswordRequest } from '@/api/user'
export default {
  name: 'GenescloudUiChangePass',
  mixins: [register],
  props: {
    bindingPhone: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      sizeForm: {
        validCode: '',
        password: '',
        passwordAgain: '',
      },
      timer: null,
      validation: '发送验证码',
      countdown: 60,
      bindPhone: this.bindingPhone
    };
  },
  computed: {
    showPhone() {
      let left = this.bindPhone.substring(0, 3)
      let right = this.bindPhone.substring(this.bindPhone.length - 3)
      return left + '****' + right
    },
  },
  mounted() {

  },

  methods: {
    //修改密码
    clickforgot() {
      this.$refs['forgotForm'].validate(async valid => {
        if (valid) {
          try{
            const res = await updataPasswordRequest(
            {
              ...this.sizeForm,
              mobilePhone: this.bindingPhone
            }
          )
          if (res.code !== 200) return this.$message.error(res.message);
          this.clear()
          this.$emit('complete', 'password');
          }catch(error){
             this.$message.error('系统错误，请联系管理员！')
          }
        }
      })
    },
    clear() {
      this.active = 1
      this.sizeForm = {
        Verification: '',
        password: '',
        passwordAgain: '',
      }
      clearInterval(this.timer)
      this.timer = null
      this.validation = '发送验证码'
      this.countdown = 60
      if (this.$refs.forgotForm) this.$refs.forgotForm.resetFields()
    }
  },
};
</script>

<style lang="scss" scoped>
.dialog_main {
  padding: 15px 20%;
  font-size: 15px;

  .title {
    margin-bottom: 25px;
  }

  ::v-deep .el-form-item--mini .el-form-item__label {
    font-weight: 400;

    &::before {
      content: ''
    }
  }

  ::v-deep .el-input--mini .el-input__inner {
    border-radius: 5px;
    height: 36px;
  }

  .verify-btn {
    float: right;
    margin-right: 10%;
    border-radius: 6px;
  }

  .primary {
    margin-left: 135px;
    border-radius: 5px
  }
}
</style>